﻿@model DemoUserInfo.Models.Article

@{
    ViewBag.Title = "编辑文章";
}

<h2> @ViewBag.Title</h2>
@using (Html.BeginForm("Create", "Articles", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <hr />
    <div class="col-md-12" style="width: 100%">
        <div class="text-center showcase_img">
            <input type="file" name="titleImg" id="TitleImg" style="display: none"
                   accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" />
            <img src="~/aaa.png" id="img" class="titleImg" alt="请添加图片" />
            <script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
            <script>
                function InitFile(fileId, imgId) {
                    $("#" + imgId).click(function () {
                        $("#" + fileId).trigger("click");
                    });
                    document.getElementById(fileId).onchange = function (evt) {
                        if (!window.FileReader) return;
                        var files = evt.target.files;
                        for (var i = 0, f; f = files[i]; i++) {
                            if (!f.type.match('image.*')) {
                                continue;
                            }
                            var reader = new FileReader();
                            reader.onload = (function (theFile) {
                                return function (e) {
                                    document.getElementById(imgId).src = e.target.result;
                                };

                            })(f);
                            reader.readAsDataURL(f);

                        }
                    }
                }

                InitFile("TitleImg", "img");
            </script>
        </div>
    </div>
    <br>
    <div class="col-md-10 col-md-offset-4">
        <div class="form-group">
            @Html.TextBoxFor(model => model.Title,
                new
                {
                    @class = "" +
                               "form-control" +
                               " text-center",
                    style = "border: 0",
                    placeholder = "请输入标题"
                })
        </div>
    </div>
        <br />
        <div class="col-md-10 col-md-offset-4 ">
            @Html.TextBoxFor(model => model.Introduction,
            new { @class = "form-control text-center", style = "border:0;", placeholder = "请输入文章简介（50字以内）" })
        </div>
        <div class="col-md-offset-2 col-md-8">
            <div id="menu">

            </div>
        </div>
        <div class="col-md-offset-2 col-md-8">
            <h2><small>正文</small></h2>
            <div id="text">
            </div>
        </div>
        <input type="hidden" name="mainArc" id="MainArc" />
        <script type="text/javascript" src="/Scripts/wangEditor.js"></script>
        <script type="text/javascript">
                var E = window.wangEditor;
                var editor = new E("#menu", "#text");
                editor.customConfig.menus = [
                    'head', // 标题
                    'bold', // 粗体
                    'italic', // 斜体
                    'underline', // 下划线
                    'strikeThrough', // 删除线
                    'foreColor', // 文字颜色
                    'backColor', // 背景颜色
                    'link', // 插入链接
                    'list', // 列表
                    'justify', // 对齐方式
                    'quote', // 引用
                    'emoticon', // 表情
                    'image', // 插入图片
                    'table', // 表格
                    'video', // 插入视频
                    'undo', // 撤销
                    'redo' // 重复
                ];
                editor.customConfig.uploadImgShowBase64 = true;
                editor.customConfig.zIndex = 1;
                editor.customConfig.onchange = function () {
                    console.log(editor.txt.html());
                    document.getElementById('MainArc').value = editor.txt.html();
                }
                editor.create();

        </script>

        <div class="col-md-10 col-md-offset-4">
            <div class="form-group">
                @Html.TextBoxFor(model => model.Tag,
                new { @class = "form-control" + " text-center", style = "border: 0", placeholder = "为文章选择一个分类" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10" style="margin-top: 25px;">
                <input type="submit" value="保存并发布" class="btn btn-default" />
            </div>
        </div>
}
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
